<template>
  <div class="bg-layer" v-show="showFlag">
	 <div class="clean-cart-dialog">
		<div class="dialog-content">
			<p class="dialog-text">确定要清空购物车吗?</p>
			<div class="opt-block">
				<button type="button" class="float-left" style="background-color: white;border:1px solid #11bbb4;color:#000" @click="showFlag = false">取消</button>
				<button type="button" class="float-right" style="background-color: #11bbb4;border:1px solid #11bbb4:" @click="cleanCart()">确定</button>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showFlag: false
      };
    },
    methods: {
    	cleanCart(){
    		window.sessionStorage.clear();
    		this.showFlag = false;

        this.$root.$data.eventHub.$emit('isNeedClean', true);
    		// this.$router.push('/menu');
        let token = window.localStorage.getItem('token');
        let storeId = window.localStorage.getItem('storeId');
        let tableId = window.localStorage.getItem('tableId');
        let tableName = window.localStorage.getItem('tableName');
        this.$router.push({name:'menu',query:{token:token,storeId:storeId,tableId:tableId,tableName:tableName}});
    	}
    }

  }
</script>

<style lang="less">
  .bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
  }

 .clean-cart-dialog {
 	position: fixed;
    width: 85%;
    height: 120px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: white;
    text-align: center;
    border-radius: 3px;
    border-radius: 2px;
    z-index: 1000;

    .dialog-content {
	  padding: 20px 40px 15px;

	  .dialog-text {
		font-size: 17px;
		margin-bottom: 20px;
	  }

	  .opt-block {
		height: 40px;

		button {
		  width: 100px;
		  height: 34px;
		  font-size: 14px;
		  border-radius: 4px;
		  color: white;
		}
	  }

	}
	
}

</style>
